<template>
  <el-card class="top-card" :class="colorClass">
    <span style="font-size: 16px">{{ widget.dataset.label }}</span>
    <p>
      <span v-if="widget.dataset.name&&data.length>0">{{data[0][widget.dataset.name]  }}</span>
    </p>
    <div class="right-icon">
      <el-icon style="top: 20%" :style="{ color: widget.iconColor }">
        <component :is="widget.iconName" />
      </el-icon>
    </div>
  </el-card>
</template>
<script setup>
import { ref, defineModel, computed, onMounted,watch} from "vue";
import Api from "@/api/model/system";
const props = defineProps({
  widget: { type: Object, default: () => {} },
  fileName: { type: String, default: "" },
});
const colorClass = computed(() => {
  return props.widget.color ? "top-card-" + props.widget.color : "";
});
const data = ref([])
watch(()=> props.widget?.datasetId,()=>{
  getTableData()
})
onMounted(() => {
  getTableData();
});

const getTableData = async () => {
  var params = {
    fileName: props.fileName,
    datasetId: props.widget.datasetId,
    queryPattern: "designPattern",
  };
  var res = await Api.select.query.post(params);
  console.log(res)
  if (res.code == 200) {
    data.value = res.reportData
  }
};
</script>
<style lang="less" scoped>
.top-card {
  position: relative;
  // font-size: 14px;
}
.top-card p {
  font-size: 20px;
  margin: 14px 0px 14px 0px;
}
.top-card .right-icon {
  position: absolute;
  top: 50%;
  right: 20px;
  //   width: 60px;
  //   height: 60px;
  //   line-height: 60px;
  // color: var(--el-color-primary);
  text-align: center;
  // background: var(--el-color-primary-light-9);
  border-radius: 50%;
  transform: translateY(-50%);
}

.top-card .right-icon i {
  font-size: 35px;
}

.top-card .bottom .ri-arrow-up-line {
  //   width: 18px;
  //   height: 18px;
  margin: 0 3px 0 2px;
  // color: var(--el-color-success);
  vertical-align: -3.5px !important;
  // background: var(--el-color-success-light);
  border-radius: 50%;
  transform: scale(0.8);
}

.top-card .bottom span {
  color: var(--el-color-success);
}
.top-card-orange {
  color: #fff;
  background: linear-gradient(90deg, #ffa545, #ff9d4561);
}
.top-card-blue {
  color: #fff;
  background: var(--el-color-primary);
  background: linear-gradient(90deg, #409effde, #409eff75);
}
.top-card-green {
  color: #fff;
  background: linear-gradient(to left, #ff89859c, #ff7886, #ff6486);
}

.top-card-purple {
  color: #fff;
  background: linear-gradient(90deg, #cd45ffe8, #cf45ff69);
}

.top-card-blue .bottom .ri-arrow-up-line {
  color: var(--el-color-primary);
  background: transparent;
  background: var(--el-color-primary-light-9);
  transform: scale(0.8);
}

.top-card-blue .bottom span {
  color: #fff;
}
</style>